<!--
 * @Autor: CQJ
 * @Date: 2022-08-17 22:09:06
 * @LastEditors: CQJ
 * @LastEditTime: 2022-08-22 12:10:18
 * @Description:
-->
<template>
  <div class="app-container">
    <div @click="changeTYpe()">
      <el-icon><Operation /></el-icon>{{ listType ? '模块视图' : '列表视图' }}
    </div>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
      <el-tab-pane label="启用中站点" name="first" v-loading="loading">
        <module-list :list="siteList" v-if="listType" />
        <type-list :list="siteList" @getList="getList" v-else />
      </el-tab-pane>
      <el-tab-pane label="已禁用" name="second" v-loading="loading2">
        <module-list :list="disableList" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref, toRefs, onMounted } from 'vue';
import ModuleList from './components/moduleList.vue';
import TypeList from './components/typeList.vue';
import { SiteItem } from '@/types/api/site/site';
import { Operation } from '@element-plus/icons-vue';
const state = reactive({
  loading: false,
  loading2: false,
  listType: true,
  siteList: [] as SiteItem[],
  disableList: [] as SiteItem[]
});
const { loading, loading2, siteList, disableList, listType } = toRefs(state);
const activeName = ref('first');
const handleClick = (tab: any) => {
  if (tab == 'first') {
    getList();
  } else {
    getList2();
  }
};
const changeTYpe = () => {
  listType.value = !listType.value;
};
const getList = () => {
  console.log(1);
  loading.value = true;
  setTimeout(() => {
    state.siteList = [
      {
        id: '1', //站点id
        type: 1, //内外部
        icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', //站点icon
        status: 1,
        name: '爱奇艺站点', //站点名
        createTime: '2018-05-27 09:55:09', //创建时间
        creator: 'administrator', //创建人
        filmNumber: 7627, //影片数量
        imgNumber: 5827, //图集数量
        articleNumber: 3253, //文章数量
        taskNumber: 10 //任务数量
      },
      {
        id: '2', //站点id
        type: 2, //内外部
        icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', //站点icon
        status: 1,
        name: '爱奇艺站点2', //站点名
        createTime: '2018-05-27 09:55:09', //创建时间
        creator: 'administrator', //创建人
        filmNumber: 7627, //影片数量
        imgNumber: 5827, //图集数量
        articleNumber: 3253, //文章数量
        taskNumber: 10 //任务数量
      },
      {
        id: '3', //站点id
        type: 1, //内外部
        icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', //站点icon
        status: 1,
        name: '爱奇艺站点3', //站点名
        createTime: '2018-05-27 09:55:09', //创建时间
        creator: 'administrator', //创建人
        filmNumber: 7627, //影片数量
        imgNumber: 5827, //图集数量
        articleNumber: 3253, //文章数量
        taskNumber: 10 //任务数量
      },
      {
        id: '4', //站点id
        type: 2, //内外部
        icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', //站点icon
        status: 1,
        name: '爱奇艺站点4', //站点名
        createTime: '2018-05-27 09:55:09', //创建时间
        creator: 'administrator', //创建人
        filmNumber: 7627, //影片数量
        imgNumber: 5827, //图集数量
        articleNumber: 3253, //文章数量
        taskNumber: 10 //任务数量
      }
    ];
    loading.value = false;
  }, 1000);
};
const getList2 = () => {
  console.log(2);
  loading2.value = true;
  setTimeout(() => {
    state.disableList = [
      {
        id: '1', //站点id
        type: 1, //内外部
        icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', //站点icon
        status: 0,
        name: '爱奇艺站点', //站点名
        createTime: '2018-05-27 09:55:09', //创建时间
        creator: 'administrator', //创建人
        filmNumber: 7627, //影片数量
        imgNumber: 5827, //图集数量
        articleNumber: 3253, //文章数量
        taskNumber: 10 //任务数量
      },
      {
        id: '2', //站点id
        type: 2, //内外部
        icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', //站点icon
        status: 0,
        name: '爱奇艺站点2', //站点名
        createTime: '2018-05-27 09:55:09', //创建时间
        creator: 'administrator', //创建人
        filmNumber: 7627, //影片数量
        imgNumber: 5827, //图集数量
        articleNumber: 3253, //文章数量
        taskNumber: 10 //任务数量
      },
      {
        id: '3', //站点id
        type: 1, //内外部
        icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', //站点icon
        status: 0,
        name: '爱奇艺站点3', //站点名
        createTime: '2018-05-27 09:55:09', //创建时间
        creator: 'administrator', //创建人
        filmNumber: 7627, //影片数量
        imgNumber: 5827, //图集数量
        articleNumber: 3253, //文章数量
        taskNumber: 10 //任务数量
      },
      {
        id: '4', //站点id
        type: 2, //内外部
        icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', //站点icon
        status: 0,
        name: '爱奇艺站点4', //站点名
        createTime: '2018-05-27 09:55:09', //创建时间
        creator: 'administrator', //创建人
        filmNumber: 7627, //影片数量
        imgNumber: 5827, //图集数量
        articleNumber: 3253, //文章数量
        taskNumber: 10 //任务数量
      }
    ];
    loading2.value = false;
  }, 1000);
};
onMounted(() => {
  getList();
});
</script>

<style lang="scss">
.container {
  background-color: #fff;
  height: 100%;
}
</style>
